<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>订单记录</title>
    <link href="../../../static/css/bootstrap.css" type="text/css" media="screen" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../../../static/css/dateRange.css"/>
    <link href="../../../static/css/set-meal.css" type="text/css" media="screen" rel="stylesheet"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
    <script type="text/javascript" src="../../../static/js/jq-paginator.js"></script>
    <style type="text/css">
        body.dashboard {
            background-color: #FBFBFB;
            font-family: 400 1em/1.8 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
        }

        a {
            color: #606266;
            display: block;
            text-decoration: none !important;
        }

        a:hover,
        a:focus {
            color: #606266;
        }

        ul,
        li {
            list-style: none;
            padding: 0;
        }

        hr {
            border-top: 1px solid #d8d8d8;
        }

        .fs12 {
            font-size: 12px;
        }

        .fs14 {
            font-size: 14px;
        }

        .fs16 {
            font-size: 16px;
        }

        .fs24 {
            font-size: 18px;
        }

        .fs18 {
            font-size: 18px;
        }

        .fw700 {
            font-weight: 700;
        }

        .c3 {
            color: #606266;
        }

        .c4d {
            color: #4d4d4d;
        }

        .c9 {
            color: #999;
        }

        .user-color {
            color: #fff;
            text-align: center;
            font-size: 16px;
            line-height: 29px;
            float: right;
        }

        .c80 {
            color: #808080;
        }

        .c926fab {
            color: #926fab;
        }

        .cbe {
            color: #bebebe;
        }

        .c4a90e2 {
            color: #4a90e2;
        }

        .mt10 {
            margin-top: 10px;
        }

        .mt50 {
            margin-top: 50px;
        }

        .mt320 {
            margin-top: 30px;
        }

        .mt30 {
            margin-top: 20px;
        }

        .body-warp {
            width: 100%;
        }

        .body-content {
            width: 58%;
            margin: 75px auto 10px;
            border: 1px solid #d8d8d8;
            border-radius: 10px;
            background-color: #fff;
            min-width: 980px;
        }

        .mian-width {
            width: 58%;
            margin: 0 auto;
            min-width: 980px;
        }

        .first-page {
            width: 94%;
            margin: 0 auto;
            overflow: hidden;
            padding: 4% 0;
        }

        .first-page-left {
            float: left;
            width: 30%;
            border: 1px solid #d8d8d8;
            text-align: center;
            padding: 20px 0;
            border-radius: 10px;
        }

        .first-page-left img {
            width: 90%;
        }

        .first-page-right {
            float: right;
            width: 60%;
            /*margin-left: 60px;*/
        }

        .left-img-content {
            width: 90%;
            margin: 15px auto;
            text-align: left;
        }

        .first-page-right-top {
            width: 100%;
        }

        .left-company {
            width: 90%;
            float: left;
        }

        .company-logo {
            float: left;
            border-radius: 50%;
        }

        .company-logo img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 1px solid #d8d8d8;
            -moz-box-shadow: 2px 2px 13px #919191;
            -webkit-box-shadow: 2px 2px 13px #919191;
            box-shadow: 2px 2px 13px #919191;
        }

        .company-name {
            width: 80%;
            float: left;
            margin-left: 3%;
        }

        .company-collect {
            width: 30px;
            height: 30px;
            cursor: pointer;
            float: right;
            margin-top: -10%;
        }

        .heat-width {
            display: inline-block;
            width: 124px;
        }

        .main-time,
        .main-count,
        .circle-data {
            width: 100%;
        }

        .main-count-li {
            width: 70%;
            overflow: hidden;
        }

        .main-count-li li {
            width: 50%;
            float: left;
            line-height: 30px;
        }

        .circle-data {
            overflow: hidden;
        }

        .circle {
            float: left;
            width: 50%;
        }

        .graph-data {
            width: 94%;
            margin: 0 auto;
        }

        .tendency {
            width: 100%;
            /*padding-bottom: 20px;*/
            overflow: hidden;
        }

        .w45 {
            width: 45%;
        }

        .fl-left {
            float: left;
        }

        .fl-right {
            float: right;
        }

        .tendency-img-left {
            width: 100%;
            height: 300px;
            border: 1px solid #D8D8D8;
            border-radius: 5px;
        }

        .tendency-title {
            margin-bottom: 10px;
        }

        .index-button {
            width: 100%;
            overflow: hidden;
        }

        .index-button-a {
            width: 110px;
            text-align: center;
            border: 1px solid #4a90e2;
            border-radius: 5px;
            padding: 2px 10px;
            cursor: pointer;
            float: left;
        }

        .index-button-a a {
            display: inline-block;
            color: #4a90e2;
        }

        a.examine-a {
            cursor: pointer;
            color: #4a90e2;
            display: inline;
            margin-left: 5px;
        }

        a.examine-a:hover,
        a.examine-a:focus {
            color: #4a90e2;
        }

        .clear {
            clear: both;
        }

        .ml10 {
            margin-left: 10px;
        }

        .mt05 {
            margin-top: 5%;
        }

        .mb05 {
            margin-bottom: 5%;
        }

        .mt2 {
            margin-top: 5%;
        }

        .navbar-brand {
            padding: 7px 0;
        }

        .single-page {
            position: absolute;
            width: 315px;
            padding: 15px 15px 0 15px;
            margin: 10px 10px 10px 0;
            border: 1px solid #d4d4d4;
            background-color: #fff;
            border-radius: 5px;
        }

        /*弹窗*/
        #more-btn img, #more-btn span {
            cursor: pointer;
        }

        .more-show-box {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 99999999999;
            background: rgba(0, 0, 0, 0.76);
            display: none;
        }

        .more-show {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 927px;
            height: 551px;
        }

        .more-show-detail {
            float: left;
            width: 874px;
            height: 100%;
            background: #fff;
            overflow: hidden;
            border-radius: 10px;
        }

        .more-show-title {
            width: 858px;
            height: 53px;
            border-bottom: 1px solid #efefef;
            background: #fff;
        }

        .more-show-title span {
            float: left;
            width: 20%;
            line-height: 53px;
            text-align: center;
            font-size: 14px;
        }

        .more-show-list {
            height: 497px;
        }

        .more-show-list li {
            height: 71px;
            border-bottom: 1px solid #efefef;
        }

        .more-show-list li:hover {
            background: #757de3;
        }

        .more-show-list .mCSB_container > li {
            background: #fff;
        }

        .more-show-list .mCSB_container > li:hover {
            background: #eee;
        }

        .more-show-list ul li {
            float: left;
            width: 20%;
            line-height: 71px;
            font-size: 14px;
            text-align: center;
            color: #4c4c4c;
        }

        .more-show-list ul li:nth-child(2),
        .more-show-list ul li:nth-child(3) {
            font-size: 12px;
        }

        .more-show-close {
            float: right;
            width: 28px;
            height: 28px;
            background: url(../../../static/images/more-show-box-close.png) no-repeat top;
            cursor: pointer;
        }

        .more-show-list ul li img {
            width: 100px;
            height: 50px;
        }

        #examples {
            position: relative;
        }

        .load-ico {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999999;
            display: none;
        }

        .slimScrollBar {
            margin-right: 3px;
        }

        .slimScrollRail {
            width: 16px !important;
            background: #e7e9eb !important;
        }
         .navbar-brand img{
        display: block;
          height: 26px;
      }
      .navbar-brand i{
          display: block;
          font-family: 黑体;
          font-size: 14px;
          letter-spacing: 17px;
          color: #fff;
      }
        .vip-ico{
            position: relative;
            top: 8px;
            left: -6px;
        }
    </style>
    <style>
        /*订单记录开始*/

        .order-record-wrapper {
            width: 100%;
            background: url(../../../static/images/order-bg.jpg) no-repeat center #4b71a5;
            background-size: cover;
            margin-top: 61px;
            padding-bottom: 60px;
        }

        .order-record-wrapper > h2 {
            font-size: 40px;
            text-align: center;
            line-height: 1;
            padding: 30px 0;
            color: #fff;
        }

        .order-record-main {
            width: 1300px;
            margin: 0 auto;
            min-height: 480px;
            background: #fff;
            border-radius: 10px;
        }

        .order-record-list * {
            font-size: 14px;
        }

        .order-record-list {
            width: 1300px;
        }

        .order-record-list > li {
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #eee;
        }

        .order-record-list > li:first-child {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background-color: #eee;
        }

        .order-record-list > li ul li {
            float: left;
            width: 25%;
            text-align: center;
        }

        .order-record-list > li:first-child ul li {
            font-size: 16px;
            /*border-right: 1px solid #eee;*/
        }

        /*订单记录结束*/
    </style>

</head>

<body>
<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
    <div class="mian-width">
        <div class="navbar-header">
            <a class="navbar-brand" href="/index"><img src="../../../static/images/icon.png"
                                                       style="margin-right: 5px"/><i>优化师加速器</i></a>
        </div>
        <div class="navbar-collapse collapse" id="login_ul">
            <ul class="nav navbar-nav pull-right" id="loginUl" style="display: block;">
                <li class="dropdown g-theme">
                    <a class="btn-login" id="btnLogin">
                        登录
                    </a>

                </li>
                <li class="dropdown g-theme">
                    <a class="btn-login btn-register" id="btnRegister" style="margin-right: 10px;">
                        注册
                    </a>

                </li>

            </ul>

            <ul class="nav navbar-nav pull-right" style="display:none;position: relative;margin-right: 8px;"
                id="userList">
                <li class="dropdown user-information" style="cursor:pointer;margin-top: 15px">
                    <img src="../../../static/images/head.png" style="width: 30px;height: 30px;" id="show_list"/>
                    <img class="vip-ico" src="../../../static/images/vip.png" alt="">
                    <div class="user-color" id="company_name"></div>
                </li>
                <ul style="display:none;position: absolute;padding: 0;background-color: #fff;max-height: 300px;border: 1px solid #f5f7fa;border-radius: 5px;-moz-box-shadow:2px 2px 13px #919191; -webkit-box-shadow:2px 2px 13px #919191; box-shadow:2px 2px 13px #919191;overflow-y: auto;z-index: 100;color: #606266;width: 150px;text-align: center;left:-46px;top:65px;"
                    id="buttonList">
                    <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="user_page">
                            <img src="../../../static/images/YHXX.png"/>
                            用户信息
                        </a>
                    </li>
                    <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="collect_page">
                            <img src="../../../static/images/sc.png"/>
                            收藏列表
                        </a>
                    </li>
                     <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="order_page">
                            <img src="../../../static/images/order.png"/>
                            充值记录
                        </a>
                    </li>
                    <li style="line-height: 40px;height: 40px;font-size: 14px;cursor:pointer;" id="out">
                        <a style="display: block;">
                            <img src="../../../static/images/TCDL.png"/>
                            退出登录
                        </a>
                    </li>
                </ul>

            </ul>
            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/purchase_page" target="_blank" class="btn-login set-meal">
                        价格套餐
                    </a>

                </li>
            </ul>
            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/product_introduction" target="_blank" class="btn-login set-meal">
                        产品介绍
                    </a>

                </li>
            </ul>
            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/show_ad_school" target="_blank" class="btn-login set-meal">
                        知识学院
                    </a>

                </li>
            </ul>

        </div>
    </div>
</div>

<!--订单记录开始-->
<div class="order-record-wrapper">
    <h2>订单详情</h2>
    <div class="order-record-main">
        <ul id="pay_order_list" class="order-record-list">

        </ul>
        <div style="text-align: center;">
            <ul class="pagination pagination-lg" id="order_paginator"></ul>
        </div>
    </div>
</div>
<!--订单记录结束-->

<div class="footer_bg">
    <div class="foot1">
        <p class="foot1_txt">Add:广东省广州市天河区中山大道西1132号410-411室</p>
        <p class="foot1_txt">Tel:400-858-8225</p>
    </div>
    <div class="foot">
        <p class=" foot_txt">COPYRIGHT (C) 2014-2016 广东原昇信息科技有限公司. ALL RIGHTS RESERVED
            <a href="http://www.miitbeian.gov.cn" style="color:#278FCF !important;">备案号：粤ICP备16061139号-2</a>
        </p>

    </div>
</div>



</body>


<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'get',
            url: '/order_record/?page=1',
            success: function (data) {
                totalCounts = parseInt(data.total_counts)
                if (totalCounts == 0) {
                    totalCounts = 1
                }
                $("#order_paginator").jqPaginator({
                    totalCounts: totalCounts,//设置分页的总条目数
                    visiblePages: 7,//设置最多显示的页码数注意：要么设置totalPages，要么设置totalCounts + pageSize，否则报错；设置了totalCounts和pageSize后，会自动计算出totalPages。
                    currentPage: parseInt(data.current_page),//当前页
                    pageSize: 10,
                    onPageChange: function (n) {
                        $.ajax({
                            type: 'get',
                            url: '/order_record/?page=' + n,
                            success: function (data) {
                                console.log(data)
                                var current_data_count = 0;
                                $("#pay_order_list").html('')
                                $("#pay_order_list").append(
                                    "<li><ul><li>订单编号</li><li>下单时间</li><li>产品名称</li><li>金额</li></ul></li>"
                                );
                                data.data.forEach(function (val) {
                                    current_data_count += 1;
                                    var order = val.fields;
                                    $("#pay_order_list").append(
                                        "<li><ul>" +
                                        "<li value=" + order.trade_no + ">" + order.trade_no + "</li>" +
                                        "<li value=" + order.start_time + ">" + order.start_time.replace('T', ' ').split('.')[0] + "</li>" +
                                        "<li value=" + order.vip_version + ">" + order.vip_version + "</li>" +
                                        "<li value=" + order.total_amount + ">" + order.total_amount + "</li>" +
                                        "</ul></li>"
                                    );
                                })

                                if (current_data_count < 10) {
                                    for (i = 0; i < 10 - current_data_count; i++) {
                                        $("#pay_order_list").append(
                                            "<li><ul>" +
                                            "<li></li>" +
                                            "<li></li>" +
                                            "<li></li>" +
                                            "<li></li>" +
                                            "</ul></li>"
                                        );
                                    }
                                }
                            }
                        })

                    }
                });
            }
        })
    })

</script>
<script type="text/javascript" src="../../../static/js/base64.js"></script>
<script type="text/javascript" src="../../../static/js/top-common.js"></script>
</html>